<template>
	<!-- 钱包卡片 -->
	 <view>
		<view class="newnavone">
			<view class="navitem" @click="navCLick(1)">
				<image class="navimg" :src="iconlist.zhuanzhang" mode="" />
				<text>转账</text>
			</view>
			<view class="navitem" @click="navCLick(2)">
				<image class="navimg" :src="iconlist.shoukuan" mode="" />
				<text>收款码</text>
			</view>
			<view class="navitem" @click="navCLick(3)">
				<image class="navimg" :src="iconlist.saoma" mode="" />
				<text>扫码</text>
			</view>
		</view>
		<view class="sh-wallet-box u-flex u-m-b-10 u-p-r-20">
			<view class="u-flex wallet-left">
				<view class="wallet-item u-flex-col u-col-center" @tap="jump('/pages/user/wallet/index')">
					<text class="wallet-item__detail item-balance u-ellipsis-1">{{ userInfo.money || '0' }}</text>
					<text class="wallet-item__title">账户余额</text>
				</view>
				<view class="wallet-item u-flex-col u-col-center" @tap="jump('/pages/user/wallet/score-balance')">
					<text class="wallet-item__detail item-score u-ellipsis-1">{{ userInfo.score || '0' }}</text>
					<text class="wallet-item__title">积分</text>
				</view>
				<view class="wallet-item u-flex-col u-col-center" @tap="jump('/pages/app/coupon/list')">
					<text class="wallet-item__detail item-coupon u-ellipsis-1">{{ userOtherData.coupons_num || '0' }}</text>
					<text class="wallet-item__title">优惠券</text>
				</view>
			</view>
			<view class="wallet-item u-flex-col wallet-right u-col-center" @tap="jump('/pages/user/wallet/index')">
				<image class="cut-off--line" :src="$IMG_URL + '/imgs/user/cut_off_line.png'" mode=""></image>
				<image class="wallet-img" :src="$IMG_URL + '/imgs/user/wallet.png'" mode="aspectFill"></image>
				<text class="wallet-item__title">我的钱包</text>
			</view>
		</view>
		<view class="newnavtwo">
			<view class="titem">
				<!-- <image class="tivimg" src="/static/images/cuowu.png" mode="" /> -->
				<text>激活会员</text>
			</view>
			<view class="jiview">
				<scroll-view class="jilist" scroll-x>
					<view class="jiitem" v-for="(item,index) in viplist" :key="index" @tap="getvip(item)">
						<image
							:src="item.image"
							mode=""
							class="jiimgs"
						/>
						<view class="jinews">
							<text class="jname">{{item.name}}</text>
							<text class="jmiao">{{item.descript}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	 </view>
	
</template>

<script>
/**
 * 钱包样式卡片
 */
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			viplist:[],
			iconlist:{}
		};
	},
	created(){
		this.getxinxi()
	},
	computed: {
		...mapGetters(['userInfo', 'userOtherData'])
	},
	methods: {
		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		},
		getvip(item){
			this.jump('/pages/user/new/Huiyuan',{id:item.id})
		},
		getxinxi() {
			this.$http('home.vipgetList', {
			}).then(res => {
				if (res.code === 1) {
					this.viplist = res.data
				}
			});
			this.$http('home.getMenuicon', {
			}).then(res => {
				if (res.code === 1) {
					this.iconlist = res.data
				}
			});
		},
		navCLick(e){
			if(e == 2){
				this.jump('/pages/user/new/Shoukuan')
			}else if(e == 1){
				this.jump('/pages/user/new/ZhuanZhang')
			}else if(e == 3){
				uni.scanCode({
					success: (res) => {
						console.log(res)
						this.jump('/'+res.path)
					// console.log('扫码结果：' + res.result);
					// 扫码成功后的操作
					// res.result 是扫码得到的结果
					},
					fail: (err) => {
					console.error('扫码失败：' + err);
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
// 钱包卡片
.sh-wallet-box {
	background: #fff;
	height: 180rpx;
	position: relative;
	.wallet-left {
		flex: 4;
	}
	.wallet-right {
		position: relative;
		.cut-off--line {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: (750rpx/5) - 15rpx;
			width: 30rpx;
			height: 136rpx;
		}
	}
	.wallet-item {
		flex: 1;
		.wallet-img {
			width: 46rpx;
			height: 46rpx;
		}
		.wallet-item__detail {
			font-size: 28rpx;
			width: 180rpx;
			text-align: center;
			font-weight: 500;
			color: rgba(168, 112, 13, 1);
		}
		.wallet-item__title {
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			margin-top: 20rpx;
		}
		.item-balance::after {
			content: '元';
			font-size: 16rpx;
			margin-left: 4rpx;
		}
		.item-score::after {
			content: '个';
			font-size: 14rpx;
			margin-left: 4rpx;
		}
		.item-coupon::after {
			content: '张';
			font-size: 16rpx;
			margin-left: 4rpx;
		}
	}
}
.newnavone{
	background-color: #fff;
	display: flex;
	flex-direction: row;
	margin-bottom: 10rpx;
	.navitem{
		width: 33.33%;
		border-right:1rpx solid #ddd;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0;
		.navimg{
			width: 75rpx;
			height: 75rpx;
			border-radius: 50%;
		}
		text{
			color: #333;
			font-size: 28rpx;
			font-weight: 400;
			display: block;
			margin-top: 8rpx;
		}
	}
	.navitem:last-child{
		border-right: none;
	}
}
.newnavtwo{
	background-color: #fff;
	display: flex;
	flex-direction: column;
	margin-bottom: 10rpx;
	padding: 30rpx 30rpx;
	.titem{
		display: flex;
		flex-direction: row;
		align-items: center;
		.tivimg{
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
		text{
			display: inline-block;
			color: #333;
			font-weight: 400;
		}
	}
	.jiview{
		margin-top: 20rpx;
		.jilist{
			white-space: nowrap;
			.jiitem{
				margin-right: 20rpx;
				background-color: rgba(252,103,37,1);
				height: 180rpx;
				width: 310rpx;
				border-radius: 10rpx;
				display: inline-block;
				// justify-content: center;
				
				position: relative;
				.jiimgs{
					position: absolute;
					width: 100%;
					height: 100%;
				}
				.jinews{
					position: relative;
					width: 100%;
					height: 100%;
					padding-left: 20rpx;
					padding-top: 30rpx;
					flex-direction: column;
				}
				.jname{
					color: #fff;
					font-size: 28rpx;
					font-weight: 400;
				}
				.jmiao{
					color: #fff;
					font-size: 25rpx;
					font-weight: 400;
					display: block;
					margin-top: 10rpx;
				}
			}
		}
	}
}
</style>
